<!-- 结算-选中的列表 -->
<template>
	<!-- 产品列表 -->
	<view class="prod-list">
		<view class="prod-item" v-for="(item, index) in arrData" :key="index">
			<view class="name" @click="toWarehouse(item, index)">
				{{ item.storeName }}
			</view>
			<view class="item-view" @click="toWarehouse(item, index)">
				<view class="top-view">
					<text class="blue">{{ item.code }} {{ item.name }}</text>
					<text class="green p-l-10">{{ item.color }}</text>
				</view>
				<view class="inventory flex">
					<view class="inventory-item flex">
						<view class="label">
							调入
						</view>
						<view class="value">
							{{ item.storeNameIn }}
						</view>
					</view>
					<view class="inventory-item flex">
						<view class="label">
							调出
						</view>
						<view class="value">
							{{ item.storeNameOut }}
						</view>
					</view>
				</view>
				<view class="inventory flex">
					<view class="inventory-item flex">
						<view class="label">
							匹数
						</view>
						<view class="value">
							{{ item.piecesCount }}
						</view>
					</view>
					<view class="inventory-item flex">
						<view class="label">
							数量
						</view>
						<view class="value">
							{{ item.quantity }}
						</view>
					</view>
				</view>
				<view class="inventory flex">
					<view class="inventory-item flex">
						<view class="label">
							幅宽
						</view>
						<view class="value">
							{{ item.widthValue }}
						</view>
					</view>
					<view class="inventory-item flex">
						<view class="label">
							克重
						</view>
						<view class="value">
							{{ item.gramWeightValue }}
						</view>
					</view>
					<view class="inventory-item flex">
						<view class="label">
							规格
						</view>
						<view class="value">
							{{ item.spec }}
						</view>
					</view>
				</view>
				<view class="inventory flex">
					<view class="inventory-item flex">
						<view class="label">
							缸号
						</view>
						<view class="value">
							{{ item.vatNo }}
						</view>
					</view>
					<view class="inventory-item flex">
						<view class="label">
							批号
						</view>
						<view class="value">
							{{ item.batchNumber }}
						</view>
					</view>
				</view>

				<view class="inventory flex">
					<view class="inventory-item flex">
						<view class="label">
							备注
						</view>
						<view class="value">
							{{ item.remarks }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/apis/sys/users'

export default {
	name: '',
	props: {
		listData: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	watch: {
		listData: {
			handler(newVal,oldVal) {
				if(oldVal && oldVal.length > 0){
					this.arrData = oldVal
					this.$forceUpdate()
				}else{
					this.arrData = newVal
					this.$forceUpdate()
				}
				
				
			}
		},
	},
	data() {
		return {
			arrData: []
		}
	},
	mounted() {
		console.log("this.listData?",this.listData);
		this.arrData = this.listData
		console.log("this.arrData?",this.arrData);
	},
	methods: {
		toWarehouse(item, index) {
			this.$emit('procureLink', item, index)
		}
	}
}
</script>

<style lang="scss" scoped>
.prod-list {
	overflow: hidden;
	margin-bottom: 100px;

	.prod-item {
		.name {
			color: #333;
			font-size: 30rpx;
			padding: 20rpx 30rpx;
		}

		.item-view {
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 20rpx 20rpx 0;
			font-size: 24rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.top-view {
				font-size: 30rpx;
				padding-bottom: 10rpx;
			}

			.inventory-item {
				font-size: 30rpx;
				line-height: 54rpx;
				flex: 1;

				.value {
					padding-left: 10rpx;
					color: #333;
				}

				.label {
					color: #999;
				}
			}
		}
	}
}</style>